<template>
  <div class="loginbody">
    <div class="d1">
       <span>用户名：</span><el-input placeholder="请输入内容" v-model="input10" clearable class="p1"></el-input>
    </div>
    <div class="d1">
       <span>密码：</span><el-input placeholder="请输入密码" v-model="input11" show-password class="p1"></el-input>
    </div>
    <el-button class="btn" type="primary"
    @click="isdis()">

      登录</el-button>
      <p class="m1" v-if="flag">信息不全，请重新填写</p>
       <div class="m2" v-if="flag2">登录成功</div>
  </div>
</template>

<script>
import {
  // mapGetters,
  mapState,

  mapMutations,
  mapActions
} from 'vuex'
export default {

  data () {
    return {
      input10: '',
      input11: '',
      flag: false,
      flag2: false
    }
  },
  computed: {
    ...mapState([
      'msg'
    ])
  },
  methods: {
    ...mapMutations([
      'del',
      'dan',
      'quan',
      'myjia',
      'myjian'
      // 'transmsg'
    ]),
    ...mapActions([
      'asydel',
      'ajaxtransmsg'
    ]),
    isdis () {
      if (this.input10.length === 0 || this.input11.length === 0) {
        this.flag = true
        setTimeout(() => {
          this.flag = false
        }, 1000)
      } else {
        this.ajaxtransmsg({username: this.input10, password: this.input11})
        console.log('msg为' + this.msg.token)
        this.flag2 = true
        setTimeout(() => {
          this.flag = false
          // this.$router.push({
          //   name: 'home'
          // })
          this.$router.back()
        }, 2000)
      }
    }
  }
}
</script>

<style scoped lang="scss">
 .loginbody{
   width:100%;
   .d1{
     width:100%;
     margin-top:20px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     .p1{
       width:70%!important;
     }
   }
   .btn{
     width:80%;
     display: block;
     margin:20px auto;
   }
 }
 .m1{
   text-align: center;
   color:red;
 }
 .m2{
   text-align: center;
  //  color:green;
  font-size:30px;
  font-weight: 600;
   position: fixed;
   top:0;
   bottom:0;
  //  height: 100%;
  padding-top:70%;
   left:0;
   right:0;
   background-color: rgba(0,0,0,.4);
  //  line-height: 100%;
   z-index:99999;

 }
</style>
